<template>
  <div class="work-navbar">
    <div class="work-navbar-block"></div>
    <div class="work-navbar-title" :class="{ active: show }" @click="handleOpen">
      {{ currentName }}
    </div>
    <div class="work-navbar-model" :class="{ active: show }">
      <span
        v-for="item in filterNavbars"
        :key="item.path"
        :class="{
          active: path.includes(item.path),
        }"
        @click="hanldeJumpPage(item.path)"
      >
        {{ item[lang] }}
      </span>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  data() {
    return {
      show: false,
    }
  },
  computed: {
    ...mapState(['menus', 'lang']),
    currentName() {
      return this.navbars.find((item) => this.path.includes(item.path))[this.lang]
    },
    path() {
      return this.$route.path
    },
    filterNavbars() {
      return this.navbars.filter((item) => !this.path.includes(item.path))
    },
    navbars() {
      return this.menus[3].children
    },
  },
  methods: {
    hanldeJumpPage(path) {
      if (this.$route.path.includes(path)) {
        return
      }
      this.$router.push({
        path,
      })
    },
    handleOpen() {
      this.show = !this.show
      document.body.style.overflow = this.show ? 'hidden' : 'auto'
    },
  },
}
</script>

<style lang="less" scoped>
@import '~assets/var';

.work-navbar {
  width: 100vw;

  &-block {
    height: 45px;
  }

  &-title {
    width: 100vw;
    padding-left: 24px;
    line-height: 48px;
    height: 48px;
    background-color: #fff;
    z-index: 20;
    position: relative;
    color: #0261bc;
    position: fixed;
    top: 50px;
    z-index: 20;
    border-bottom: 1px solid #f1f1f1;

    &::after {
      content: '';
      display: block;
      width: 6px;
      height: 6px;
      border-left: 1px solid #0261bc;
      border-bottom: 1px solid #0261bc;
      position: absolute;
      top: 20px;
      right: 24px;
      transform: rotate(-45deg);
      transition: 0.2s all linear;
      transform-origin: 50% 50%;
    }

    &.active {
      &::after {
        top: 24px;
        transform: rotate(135deg);
      }
    }
  }

  &-model {
    position: fixed;
    background-color: #fff;
    width: 100%;
    z-index: 19;
    display: flex;
    flex-direction: column;
    top: 95px;
    bottom: 100%;
    transition: all 0.2s ease;
    opacity: 0;
    overflow: hidden;

    &.active {
      opacity: 1;
      top: 95px;
      bottom: 0;
    }

    span {
      line-height: 48px;
      height: 48px;
      padding-left: 24px;
      border-top: 1px solid #f1f1f1;
    }
  }
}
</style>
